<template>
  <div class="basic-layout">
    <div :class="['nav-side', isCollapse ? 'fold' : 'unfold']">
      <div class="logo">
        <img src="./../assets/logo.png" alt="" />
        <span>Manager</span>
      </div>
      <el-menu
        default-active="2"
        class="nav-menu"
        background-color="#001529"
        text-color="#fff"
        router
        :collapse="isCollapse"
         :collapse-transition="false"
      >
        <!-- 渲染请求回来的的菜单
        回来的菜单分为一级和二级（递归的调用这个组件渲染二级菜单）
         -->
        <tree-menu :userMenu="userMenu" />
      </el-menu>
    </div>
    <div :class="['content-right', isCollapse ? 'fold' : 'unfold']">
      <div class="nav-top">
        <div class="nav-left">
          <div class="menu-fold" @click="toggle">
            <el-icon><Fold /></el-icon>
          </div>
          <div class="bread">
            <Breadcrumb />
          </div>
        </div>
        <div class="logOut">
          <el-dropdown @command="handlerLogout">
            <span class="el-dropdown-link">
              {{userName}}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="email">邮箱 {{userEmail}}</el-dropdown-item>
                <el-dropdown-item command="logOut" @click="clearAll">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="wrapper">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import api from "../../src/api/index.js";
import { reactive, ref, getCurrentInstance,watch } from "vue";
import TreeMenu from "./TreeMenu.vue";
import Breadcrumb from "./Breadcrumb.vue";
import { useStore } from "vuex";
import storage from "../utils/index";
import { useRouter, useRoute } from "vue-router";

const { proxy } = getCurrentInstance();
const userMenu = ref([]);

const router = useRouter();
const store = useStore();

const userName=ref()
const userEmail=ref()

// watch(()=>store.state.userInfo,(newData,oldData)=>{
//   userName.value=store.state.userInfo.data.userName
// })

const sendData = async () => {
  let result;

  //  try {
  //    result=await post("/users/login",user.value)
  //  } catch (error) {

  //  }
  //  proxy.$api.login(user.value).then((res,code)=>{
  //      console.log(res);
  //   },(err)=>{
  //     console.log(err.data.code);
  //   })
  try {
    result = await api.getPermisssonList();
     userName.value=store.state.userInfo.data.userName
  
      userEmail.value=store.state.userInfo.data.userEmail
     
  } catch (error) {}

  if (result.data.code == 200) {
    let { actionList, menuList } = result.data.data;
    userMenu.value = menuList;
   store.commit("saveMenuList",menuList)
   store.commit("saveActionList",actionList)
  }
};
sendData();

const handlerLogout = (key) => {
  if (key == "email") return;
  store.commit("saveUserInfo", "");
  storage.clearitem("userInfo");
  router.push("/login");
};
const isCollapse = ref(false);
const toggle = () => {
  isCollapse.value = !isCollapse.value;
  let div = document.querySelectorAll(".el-sub-menu__icon-arrow");
  if (isCollapse.value) {
    div.forEach((ele) => {
       //ele.style.position="relative"
      // ele.style.left = "80%";
      ele.style.display="none"
      
    });
  } else {
    
    div.forEach((ele) => {
      // ele.style.position="absolute"
      // ele.style.left = "80%";
       ele.style.display="block"
    });
  }
};
const clearAll=()=>{
  storage.clearAll()
}
</script>

<style lang="scss">
.basic-layout {
  position: relative;
  
  .nav-side {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: #001529;
    color: #fff;
    overflow-y: auto;
    transition: all 0.2s;
    overflow: hidden;
    z-index: 99;
    .logo {
      display: flex;
      align-items: center;
      font-size: 18px;
      height: 50px;
      img {
        margin: 0 16px;
        width: 32px;
        height: 32px;
      }
    }
    .nav-menu {
      height: calc(100vh - 50px);
      border-right: none;
    }
    //合并
    &.fold {
      width: 50px;
    }
    // 展开
    &.unfold {
      width: 200px;
    }
  }
  .content-right {
    margin-left: 200px;
    transition: all 0.2s;
     min-width: 1400px;
    //合并
    &.fold {
      margin-left: 50px;
    }
    // 展开
    &.unfold {
      margin-left: 200px;
    }
    .nav-top {
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      padding: 0 20px;

      .nav-left {
        display: flex;
        align-items: center;
        .menu-fold {
          margin-right: 15px;
          font-size: 18px;
          cursor: pointer;
        }
      }
      .user-info {
        .notice {
          line-height: 30px;
          margin-right: 15px;
          cursor: pointer;
        }
        .user-link {
          cursor: pointer;
          color: #409eff;
        }
      }
    }
    .wrapper {
      background: #eef0f3;
      padding: 20px;
      height: calc(100vh - 50px);
      .main-page {
        background: #fff;
        height: 100%;
      }
    }
  }
}
.logOut {
  display: flex;
  align-items: center;
  cursor: pointer;
  .el-dropdown-link {
    display: flex;
    align-items: center;
    .el-icon--right {
      transition: all 0.2s ease-in-out;
      transform: rotate(90deg);
    }
  }
  &:hover {
    .el-icon--right {
      transform: rotate(0deg);
    }
  }
}
</style>
